import React, {useEffect, useState} from 'react';
import {Avatar, Button, Form, message, Input, Popconfirm, Table} from "antd";
import {blacklistUser, getUserListApi} from "./UserLIstApi";
import {SearchOutlined, SyncOutlined, UserOutlined} from "@ant-design/icons";
import {timestampToTime} from '../../utils/dateTimeUtlis'

function UserList() {
    const [searchData, setSearchData] = useState({})
    const [tableData, setTableData] = useState([])
    const [messageApi, contextHolder] = message.useMessage();
    const adminNumber = process.env.REACT_APP_BASE_ADMIN

    const columns = [
        {
            title: '用户账号',
            key: 'userNumber',
            dataIndex: 'userNumber',
            align: 'center'
        },
        {
            title: '用户名称',
            key: 'userName',
            dataIndex: 'userName',
            align: 'center'

        },
        {
            title: '用户头像',
            key: 'userPhotoUrl',
            dataIndex: 'userPhotoUrl',
            align: 'center',
            width: '150px',
            render: (text) => {
                const url = text ? text : null
                return (
                    <Avatar
                        size={{xs: 12, sm: 16, md: 20, lg: 32, xl: 40, xxl: 50,}}
                        src={url}
                        icon={<UserOutlined/>}>
                    </Avatar>
                )
            }
        },
        {
            title: '用户性别',
            key: 'userSex',
            dataIndex: 'userSex',
            align: 'center'

        },
        {
            title: '用户状态',
            key: 'userBlacklist',
            dataIndex: 'userBlacklist',
            align: 'center',
            render: (text) => {
                const status = text === '1' ? '已拉黑' : '正常'
                const color = text === '1' ? 'red' : 'green'
                return (
                    <div style={{backgroundColor: color, color: '#fff'}}>{status}</div>
                )
            }

        },
        {
            title: '用户电话号码',
            key: 'userPhone',
            dataIndex: 'userPhone',
            align: 'center'

        },
        {
            title: '用户邮箱',
            key: 'userEmail',
            dataIndex: 'userEmail',
            align: 'center'

        },
        {
            title: '创建日期',
            key: 'createdAt',
            dataIndex: 'createdAt',
            align: 'center',
            render: (text) => {
                return (
                    <div>{timestampToTime(text)}</div>
                )
            }
        },
        {
            title: '操作',
            key: 'operation',
            align: "center",
            fixed: 'right',
            render: (text) => {
                const name = text.userBlacklist === '1' ? '解除拉黑' : '拉黑'
                if (text.userNumber === adminNumber) {
                    return (
                        <Button type="link" disabled>无法拉黑</Button>
                    )
                }
                return (
                    <div>
                        <Popconfirm
                            title={name + '确认'}
                            description={`是否${name}该用户`}
                            onConfirm={() => delUser(text.id, text.userBlacklist)}
                            onCancel={cancel}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="link"
                                    danger={text.userBlacklist === '0' ? true : false}>
                                {name}
                            </Button>
                        </Popconfirm>
                    </div>
                )
            }
        },
    ]

    // 拉黑
    const delUser = (id, type) => {
        const data = {id}
        if (type === '1') {
            data.type = '0'
        } else {
            data.type = '1'
        }
        blacklistUser(data).then(res => {
            if (res.code === '200') {
                message.success(type === '1' ? '解除成功' : '拉黑成功')
                getUserListFun(searchData)
            } else {
                message.success('请求失败')
            }
        }).catch(e => {
            message.success('系统错误')
        })
    }

    // 取消删除
    const cancel = (e) => {
        messageApi.info('已取消拉黑');
    };

    // 修改输入框的之
    const inputChange = (e, name) => {
        setSearchData({...searchData, [name]: e.target.value})
    }

    useEffect(() => {
        getUserListFun()
    }, [])

    // 请求数据
    const getUserListFun = (data = null) => {
        getUserListApi(data).then(res => {
            if (res.code === '200') {
                setTableData(res.data)
            }
        }).catch(e => {
            console.log(e)
        })
    }

    //查询
    const searchFun = () => {
        getUserListFun(searchData)
    }

    //重置
    const reset = () => {
        getUserListFun()
    }

    return (
        <div>
            {contextHolder}
            <div style={{display: 'flex'}}>
                <div style={{width: '300px', overflow: 'hidden'}}>
                    <Form
                        name="basic"
                        wrapperCol={{span: 18,}}
                        style={{maxWidth: 600,}}
                        initialValues={{remember: true,}}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="用户账号"
                            name="userNumber">
                            <Input onChange={(e) => inputChange(e, 'userNumber')}/>
                        </Form.Item>
                    </Form>
                </div>
                <div>
                    <Button onClick={searchFun} icon={<SearchOutlined/>} type="primary">查 询</Button>
                    <div style={{width: '10px', display: 'inline-block'}}></div>
                    <Button onClick={reset} icon={<SyncOutlined/>}>重 置</Button>
                </div>
            </div>
            <div>
                <Table columns={columns} rowKey={'id'} dataSource={tableData} bordered pagination={false}/>
            </div>
        </div>
    );
}

export default UserList;
